<template>
  <div class="login">
      <van-nav-bar
        title="来登录啦"
        />
        <!-- 表单 -->
        <van-cell-group>
        <van-field
            v-model.trim="userInfo.mobile"
            required
            label="手机号"
            placeholder="请输入手机号"
            :error-message="errInfo.mobile"
        />
        <van-field
            v-model.trim="userInfo.code"
            required
            type="password"
            label="密码"
            placeholder="请输入密码"
            :error-message="errInfo.code"
        />
        </van-cell-group>
        <!-- 登录按钮 -->
        <div class="btn-wrap">
            <van-button type="info" class="btn" @click="hLogin">登录</van-button>
        </div>
  </div>
</template>

<script>
import { userLogin } from '@/api/user.js'
export default {
  name: 'loginIndex',
  data () {
    return {
      userInfo: {
        // 下面的具体的表单字段mobile,code是参考接口文档中的要求来写的
        mobile: '13911111111',
        code: '246810'
      },
      errInfo: {
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
    // 自行定义验证方法
    validateUserInfo () {
      const { mobile, code } = this.userInfo
      if (mobile === '') {
        this.errInfo.mobile = '手机号不能为空'
        return false
      }
      if (code === '') {
        this.errInfo.code = '密码不能为空'
        return false
      }
      return true
    },
    async hLogin () {
      this.$toast.loading({
        message: '加载中...',
        mask: true, // 整体添加一个遮罩
        duration: 0 // 持续展示 toast,永远不会关闭
      })
      // 1. 收集用户信息
      // 2. 验证是否为空,格式......
      // 3. 发ajax
      if (this.validateUserInfo() === false) {
        return
      }
      const { mobile, code } = this.userInfo
      try {
        const result = await userLogin(mobile, code)
        // ajax结束之后，取消loding ： 用一个新提示来覆盖之前的loading
        this.$toast.success('登陆成功')
        // 调用mutation保存token到vuex
        this.$store.commit('mSetTokenInfo', result.data.data)
        // 跳转到layout 根据当前路由参数，决定跳到哪里去
        const jumpto = this.$route.query.backto || '/'
        this.$router.push(jumpto)
      } catch (err) {
        console.log(err)
        this.$toast.fail('登录失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login {
    // 让登陆按钮居中
    .btn-wrap {
      padding:20px;
      .btn {
        width: 100%;
        background-color: #6db4fb;
        color: #fff;
      }
    }
  }
</style>>
